<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<view
			style="border-radius: 5px;width: 90%;margin: 2%;box-shadow: #BFBFBF 1px 1px 2px 0;padding: 2%; font-size: 15px;">
			<view style="display: flex;justify-content: space-between;height: 5vh;font-size: 15px;">
				<text>{{add}}</text>
				<text style="color: #C0C0C0;">></text>
			</view>
			<view
				style="display: flex;justify-content: space-between;height: 5vh; font-size: 10px;color: #C0C0C0; border-top:1px solid #d5d5d5 ;padding: 10px 0 0 0;">
				<text>{{t_name}}<span>{{tel}}</span></text>
				<text style="font-size: 15px;"><span
						style="color: #0055ff;padding-right: 10px;font-size: 10px;">立即服务</span>></text>
			</view>
			<view
				style="display: flex;justify-content: space-between;height: 5vh; font-size: 10px; border-top:1px solid #d5d5d5 ;padding: 10px 0 0 0;">
				<text><span>备注</span></text>
				<text style="color: #C0C0C0;"><span>请输入</span>></text>
			</view>

		</view>
		<view style="height: 1vh;background-color: #e4e4e4;width: 100%;">
		</view>
		<view
			style="display: flex;border-radius: 5px;width: 90%;margin: 2%;padding: 2%; font-size: 10px;flex-direction: column; ">
			<view
				style="display: flex;flex-direction: row; height: 8vh;align-items: center;justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<image src="../../../static/img/doctor.png"
						style="width: 25px;height: 25px;background-color: #007AFF;padding: 5px;"></image>
					<text style="margin-left: 10px;">{{name}}</text>
				</view>
				<text style="color: red;">￥<span style="font-size: 20px;">38</span></text>
			</view>
			<text style="text-align: right;font-size: 8px;padding: 10px 0; border-top:1px solid #d5d5d5 ;">小计<span
					style="color: red;padding-left: 10px;">￥0</span></text>
		</view>
		<view style="height: 1vh;background-color: #e4e4e4;width: 100%;">
		</view>
		<view
			style="display: flex;border-radius: 5px;width: 90%;margin: 2%;padding: 2%; font-size: 10px;flex-direction: column; ">
			<view @click="num=1" style="display: flex;align-items: center;height: 6vh;justify-content: space-between;">
				<view style="display: flex;align-items: center;height: 8vh;">
					<image src="../../../static/creditcard.png"
						style="width: 24px;height: 24px;background-color: #007AFF;padding: 3px;border-radius: 15px;">
					</image>
					<text style="margin-left: 10px;font-size: 10px;">免支付(剩余<span style="color: red;">3</span>次)</text>
				</view>
				<text v-show="num==1" style="color: #007AFF;font-size: 15px;font-weight: bolder;">√</text>
			</view>
			<view @click="num=2" style="display: flex;align-items: center;height: 8vh; justify-content: space-between;">
				<view style="display: flex;align-items: center;height: 8vh;">
					<image src="../../../static/wechart.png" style="width: 30px;height: 30px;"></image>
					<text style="margin-left: 10px;font-size: 10px;">微信</text>
				</view>
				<text v-show="num==2" style="color: #007AFF;font-size: 15px;font-weight: bolder;">√</text>
			</view>
			<view @click="num=3" style="display: flex;align-items: center;height: 8vh;justify-content: space-between;">
				<view style="display: flex;align-items: center;height: 8vh;">
					<image src="../../../static/alipay-circle-fill.png" style="width: 30px;height: 30px;"></image>
					<text style="margin-left: 10px;font-size: 10px;">支付宝</text>
				</view>
				<text v-show="num==3" style="color: #007AFF;font-size: 15px;font-weight: bolder;">√</text>
			</view>
		</view>
		<text @click="submit"
			style="color: white;width: 90vw;background-color: #007AFF;text-align: center;padding: 8px;font-size: 15px;border-radius: 5px;margin-top: 10vh;">提交</text>
		<view v-if="subnum==1" style="position: fixed;top:20vh;background-color: #007AFF;width: 200px;height: 250px; display: flex;align-items: center;flex-direction: column;justify-content: space-between;padding: 50px 0;">
			<view style="height: 100px;width: 100px;background-color: #4CD964;border-radius: 50px;font-size: 50px;color: white; text-align: center;line-height: 100px;">
				√
			</view>
			<text style="color: white; ">支付成功</text>
		</view>
		<view v-if="subnum==2||subnum==3" style="position: fixed;top:20vh;background-color: #007AFF;width: 200px;height: 250px; display: flex;align-items: center;flex-direction: column;justify-content: space-between;padding: 50px 0;">
				<image src="../../../static/touxiang.png" style="width: 180px;height: 180px;"></image>
			<text style="color: white; font-weight: bold;font-size: 20px;">性感苟涛在线交友</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				add: "上海市黄浦区996号102室",
				tel: "17751888188",
				t_name: "李益民",
				tips: "",
				name: "",
				num: 1,
				subnum:'',
			}
		},
		methods: {
			submit() {
			if(this.num==1){
				this.subnum=1
				setTimeout(function(){
					console.log("123")
				uni.switchTab({
					url: "/pages/yan/index/index"
				})
				},2000)
			}else if(this.num==2){
				this.subnum=2
			}else if(this.num==3){
				this.subnum=3
			}
			}
		},
		onLoad(option) {
			console.log(option)
			option.id == "" ? option.id = 1 : option.id = option.id
			this.id = parseInt(option.id)
			if (option.id == 1) {
				this.name = "理发服务"
			} else if (option.id == 2) {
				this.name = "助医服务"
			} else if (option.id == 3) {
				this.name = "洗涤服务"
			} else if (option.id == 4) {
				this.name = "助浴服务"
			} else if (option.id == 5) {
				this.name = "个人护理"
			} else if (option.id == 6) {
				this.name = "神慰慰藉"
			} else if (option.id == 7) {
				this.name = "康复训练"
			}
		}
	}
</script>

<style>

</style>
